// pages/home/index.tsx
import * as React from 'react';
// import mapboxgl from 'mapbox-gl'
import mapboxgl from '@/assets/cdn/mapbox/mapbox-gl.js'
import  { useEffect, useState,useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import MainAPI from '../../services/index';  // 不需要指定 index.ts
  // 定义返回的天气数据类型
interface WeatherData {
    name: string;
    main: {
      temp: number;
    };
    weather: Array<{
      description: string;
    }>;
  }
const Home: React.FC = () => {
      // 使用 useState 来存储 API 获取的数据
  const [weatherData, setWeatherData] = useState<WeatherData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  // 使用 useEffect 来处理 API 请求
  useEffect(() => {
    const fetchWeatherData = async () => {
      try {
        const response = await MainAPI.getWeather('London'); // 示例：你可以修改城市名
        setWeatherData(response.data);
      } catch (err) {
        setError('Failed to fetch weather data');
      } finally {
        setLoading(false);
      }
    };
    const initMapbox = async () => {
      mapboxgl.accessToken = 'pk.eyJ1IjoiYnVnbWExa2VyIiwiYSI6ImNtOHBka3p1OTBhZ3QyanNhOHV4bHM3MWEifQ.AQXyF5gvVkuUoD18ky52FA'
      // 初始化地图
      const map = new mapboxgl.Map({
        container:mapRef.current,
        style:'mapbox://styles/bugma1ker/ckw0cyddu431914pa997gphgw',
        center:[116.4074,39.9042],
        zoom:10,
      })
    }
    fetchWeatherData();
    initMapbox()
    
  }, []); // 空数组表示只在组件挂载时执行一次
  const mapRef = useRef<HTMLDivElement | null>(null)
  const navigate = useNavigate();
    const handleClick = () => {
        navigate('/V2coding'); // 替换为你想跳转的路由路径
  };
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      {loading && <p>Loading...</p>}
      {error && <p>{error}</p>}
        {/*天气渲染*/}
      {weatherData && (
        <div>
          <h2>Weather in {weatherData.name}</h2>
          <p>Temperature: {weatherData.main.temp}°C</p>
          <p>Description: {weatherData.weather[0].description}</p>
        </div>
      )}
        {/*地图渲染*/}
       <div ref={mapRef} style={{ width: '500px', height: '500px' }}>
        {/* 这里是你的地图渲染区域 */}
        Map will be here
      </div>
      <button onClick={handleClick}>跳转</button>
    </div>
   
  );
  
};

export default Home;